﻿
@{
    Layout = null;
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>salary_grantSeQuer</title>
    <script src="~/lib/axios/dist/axios.js"></script>
    <script src="~/lib/vue/dist/vue.js"></script>
    <script src="~/lib/element-ui/lib/index.js"></script>
    <link href="~/lib/element-ui/lib/theme-chalk/index.css" rel="stylesheet" />
</head>
<body>
    <div id="app">
        <p ref="oop" style="display:none">@ViewBag.salary_grant_id</p>
        <el-container>
            <el-header>
                <el-card class="box-card">
                    <el-col :span="4"> 薪酬发放查询 </el-col>
                </el-card>
            </el-header>
            <el-main>
                <el-card class="box-card">
                    <el-form ref="form" :model="form"  label-width="80px" :inline="true" size="mini">
                        <el-form-item class="_klpo">
                            <el-button @@click="eas()">返回</el-button>
                        </el-form-item>
                        <el-form-item label="薪酬单编号" prop="oid" label-width="82px">
                            <el-input v-model="oid" style="width: 160px " :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="本机构总人数" prop="total" label-width="96px">
                            <el-input v-model="total" style="width: 160px " :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="基本薪酬总数" prop="salary_standard_sum" label-width="96px">
                            <el-input v-model="form.salary_standard_sum" style="width: 155px" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="实发总额" label-width="68px">
                            <el-input v-model="form.salary_paid_sum" style="width: 140px " :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="登记人" prop="register" label-width="65px">
                            <template>
                                <el-select v-model="form.register" placeholder="请选择登记人" style="width: 177px " :disabled="true">
                                    <el-option v-for="item in listm"
                                               :key="item.u_id"
                                               :label="item.u_true_name"
                                               :value="item.u_true_name">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-form-item>
                        <el-form-item prop="regist_time" label="登记时间" label-width="68px">
                            <el-date-picker style="width: 188px " :disabled="true" type="datetime" placeholder="选择日期" v-model="form.regist_time"></el-date-picker>
                        </el-form-item>
                    </el-form>
                    <el-divider></el-divider>
                    <el-table :data="list" style="width: 100%" border stripe @@cell-mouse-enter="cx">
                        <el-table-column type="index"
                                         label="序号"
                                         width="150px"
                                         align="center">
                        </el-table-column>
                        <el-table-column prop="human_id"
                                         label="档案编号"
                                         align="center">
                        </el-table-column>
                        <el-table-column prop="human_name"
                                         label="姓名"
                                         align="center">
                        </el-table-column>
                        <el-table-column label="薪酬基本明细"
                                         align="center">
                            <template slot-scope="scope">
                                <el-popover trigger="hover" placement="top">
                                    <p align="center" v-for="item in list1">{{ item.item_name }}: {{ item.salary }}</p>
                                    <div slot="reference" class="name-wrapper">
                                        <el-tag size="medium">详细内容</el-tag>
                                    </div>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column label="奖励金额" align="center">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.bouns_sum" :disabled="true"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="销售绩效总额" align="center">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.sale_sum" :disabled="true"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="应扣金额" align="center">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.deduct_sum" :disabled="true"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="实发金额" align="center">
                            <template slot-scope="scope">
                                {{scope.row.sum=scope.row.salary_paid_sum}}
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-main>
        </el-container>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                list: [],//人力资源表
                list1: [],//薪酬详细表
                listm: [],//用户
                listse: [],//人力资源表
                oid: '',//编号
                total: '',//人数
                form: {
                    sgr_id: '',
                    type: '',
                    register: '',
                    regist_time: '',
                    salary_standard_sum: '',
                    salary_paid_sum: '',
                },
            },
            methods: {
                eas() {
                    location.href = "/salary_grantSe/salary_grantSe";
                },
                //按薪酬编号查薪酬详细信息
                cx(row) {
                    axios.get('/salary_grant/Que', {
                        params: {
                            id: row.salary_standard_id,
                        }
                    })
                        .then(res => {
                            console.info(res);
                            this.list1 = res.data;
                        })
                        .catch(err => {
                            console.info(err);
                        });
                },
                fill() {
                    //薪酬发放编号
                    var lo = this.$refs.oop.innerHTML;
                    //用户查询
                    axios.get('/users/que', {
                    })
                        .then(res => {
                            console.info(res);
                            this.listm = res.data;
                        })
                        .catch(err => {
                            console.info(err);
                        });
                    //薪酬发放编号查询薪酬发放
                    axios.get('/salary_grantTo/Cux', {
                        params: {
                            id: lo,
                        }
                    })
                        .then(res => {
                            console.info(res);
                            this.oid = res.data[0].salary_grant_id;
                            this.total = res.data[0].human_amount;
                            this.form.salary_standard_sum = res.data[0].salary_standard_sum;
                            this.form.salary_paid_sum = res.data[0].salary_paid_sum;
                            this.form.sgr_id = res.data[0].sgr_id;
                            this.form.register = res.data[0].register;
                            this.form.regist_time = res.data[0].regist_time;
                            //薪酬发放编号查询薪酬详细表
                            axios.get('/salary_grantTo/CuxTo', {
                                params: {
                                    id: res.data[0].salary_grant_id,
                                }
                            })
                                .then(res => {
                                    this.lists = res.data;
                                    //薪酬编号查询人力资源表
                                    axios.get('/salary_grantTo/ChaX')
                                        .then(res => {
                                            this.listse = res.data;
                                            for (var index in this.lists) {
                                                    for (var index1 in this.listse) {
                                                        if (this.listse[index1].human_id == this.lists[index].human_id) {
                                                            this.lists[index].salary_standard_id = this.listse[index1].salary_standard_id;
                                                            this.lists[index].huf_id = this.listse[index1].huf_id;
                                                            break
                                                        }
                                                    }
                                            }
                                            this.list = this.lists;
                                        })
                                        .catch(err => {
                                            console.info(err);
                                        });
                                })
                                .catch(err => {
                                    console.info(err);
                                });
                        })
                        .catch(err => {
                            console.info(err);
                        });
                },
            },
            //可以对vue的数据和方法进行操作,能对DOM进行操作
            mounted: function () {
                this.fill();
            }
        });
    </script>
    <style scoped>
        .el-col-4 {
            width: 20%;
            font-size: 15px;
            font-weight: 900;
            line-height: 0px;
        }
        .el-card__body {
            padding: 35px;
        }

        element.style {
            height: 100%;
            width: 1239px;
        }

        .el-button.is-circle {
            border-radius: 50%;
            padding: 12px;
            position: relative;
            top: -10px;
            right: -570px;
        }

        ._klpo {
            float: right;
        }
    </style>
</body>
</html>
